@use 'design-system' as *;

.showHideButton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: $spacing-size-2;
    width: 100%;

    .isOpen & {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    svg {
        width: 20px;
        height: 20px;
        transition:
            fill $transition-default-timing,
            transform $transition-default-timing;
    }

    #{$selector-darkmode} & {
        border: 1px solid rgb(255, 255, 255, 0.15);
    }
}

.content {
    $border: 1px solid var(--color-border-primary);

    position: relative;
    padding: $spacing-size-4;
    border-bottom-right-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    border-right: $border;
    border-bottom: $border;
    border-left: $border;
    overflow: hidden;

    &:not(.notExpandable) > div {
        overflow: hidden;
        padding-bottom: $spacing-size-24;
    }

    &.contentCollapsed:not(.notExpandable) > div {
        max-height: 340px;
    }

    &.contentExpanded {
        > div {
            max-height: none;
        }

        .showMoreLink {
            padding-top: $spacing-size-4;
            background-image: none;
        }
    }

    &.noContent {
        border: none;
        padding: 0;
    }
}

.showMoreLink {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: $spacing-size-24 $spacing-size-4 $spacing-size-4;
    text-align: center;
    background-image: linear-gradient(transparent, var(--color-bg-primary) 75%);
    border-radius: var(--radius-sm);
    color: var(--color-link);
    transition: color $transition-default-timing;

    svg {
        --icon-size: 1em;

        fill: var(--color-link);
        transition: fill $transition-default-timing;
    }

    &:hover {
        color: var(--color-link-hover);

        svg {
            fill: var(--color-link-hover);
        }
    }
}

.versionLabel {
    font-weight: var(--text-regular);
    color: var(--color-button-primary-fg);

    [aria-disabled] & {
        color: var(--color-button-secondary-fg);
    }
}
